<template>
  <div>
    <Form :model="searchFrom" :label-width="80">
      <Card style="margin-bottom: 10px;">
        <Input placeholder="轮号" v-model="searchFrom.temp" style="width:200px"></Input>
        &nbsp;
        <Input :placeholder="$t('orderInfoManager.tradeIndex')" v-model="searchFrom.tradeIndex" style="width:200px"></Input>
        <!-- &nbsp;
        <Select v-model="searchFrom.orderType" style="width:150px" placeholder="订单类型">
        	<Option v-for="item in orderTypeList" :value="item.index" :key="item.index">{{ item.showName }}</Option>
        </Select> -->
        &nbsp;
        <Input placeholder="用户名或手机号码" v-model="searchFrom.user_name_like" style="width:200px"></Input>
        &nbsp;
        <Select v-model="searchFrom.orderState" style="width:150px" :placeholder="$t('orderInfoManager.orderState')">
          <Option v-for="item in orderStateList" :value="item.index" :key="item.index">{{ item.showName }}</Option>
        </Select>
        &nbsp;
        <Date-picker type="date" v-model="searchFrom.stDate" placement="bottom-end" placeholder="开始时间" style="width: 200px"></Date-picker>
        &nbsp;
        <Date-picker type="date" v-model="searchFrom.enDate" placement="bottom-end" placeholder="结束时间" style="width: 200px"></Date-picker>

        &nbsp;<Button type="primary" @click="getData(1)" icon="ios-search">{{$t('button.search')}}</Button>
      </Card>
    </Form>
    <Table border :data="tableData" :columns="tableColumns" stripe />
    <div style="margin:10px 0px;text-align: center;">
      <Page :total="dataCount" :current="searchFrom.page" @on-change="changePage"></Page>
    </div>

    <Modal width="80%" v-model="orderDetailModal" :footer-hide="true" title="订单详情">
      <orderDetail :orderId="orderId"></orderDetail>
    </Modal>
    <Modal width="80%" v-model="userBiRecordModal" :footer-hide="true" title="订单奖励">
      <userBiRecord :orderId="orderId" :biType="500"></userBiRecord>
    </Modal>
  </div>
</template>

<script>
  import orderDetail from './components/orderDetail';
  import userBiRecord from '../userBiRecord/userBiRecord';
  import {
    list,
    updateOrder
  } from '@/api/manager/orderInfo';
  import {
    formatDate
  } from '@/libs/tools';
  import {
    mapGetters
  } from 'vuex';
  export default {
    name: 'orderInfo',
    props: {
      addUserId: {
        type: Number,
        default: null
      }
    },
    components: {
      orderDetail,
      userBiRecord
    },
    data() {
      return {
        dataCount: 0,
        tableData: [],
        orderStateList: [],
        orderTypeList: [],
        orderDetailModal: false,
        userBiRecordModal: false,
        orderId: 0,
        entity: {
          orderValue: 0,
        },
        searchFrom: {
          stDate: "",
          enDate: "",
          page: 1,
          user_name_like: '',
          temp: '',
        },
      };
    },
    mounted: function() {
      this.getData();
    },
    watch: {
      addUserId: function(value) {
        if (value) {
          this.searchFrom["addUserId"] = value;
          this.getData();
        }
      }
    },
    computed: {
      tableColumns() {
        let that = this;
        return [{
            title: '序号',
            type: 'index',
            width: 80,
            align: 'center',
          },
          {
            title: '轮号',
            align: 'center',
            width: 100,
            key: 'temp'
          },
          {
            title: '订单号',
            align: 'center',
            width: 100,
            key: 'tradeIndex'
          },
          {
            title: '下单人',
            align: 'center',
            key: 'addUserName'
          },

          {
            title: "USDT金额",
            align: 'center',
            key: 'orderMoney'
          },
          {
            title: "GHMI金额",
            align: 'center',
            key: 'moneyBi'
          },
          {
            title: "收益",
            align: 'center',
            // key: 'profitMoney',
            render: (h, params) => {
              let a = params.row.profitMoney;
              // if (params.row.orderState == 50) {
              //   a = params.row.profitMoney + params.row.orderMoney
              // }
              console.info("a:" + a)
              let userName = h("a", {
                  on: {
                    click: () => {
                      that.orderId = params.row.id;
                      that.userBiRecordModal = !that.userBiRecordModal;
                    }
                  }
                },
                a
              );
              return h("div", [userName]);
            }
          },

          {
            title: "周期/出单时间",
            align: 'center',
            key: 'tempIndex',
            render: (h, params) => {
              let tempIndex = h("div", {}, params.row.tempIndex);
              let endDate = h("div", {}, formatDate(new Date(params.row.endDate), 'yyyy-MM-dd'));
              return h("div", [tempIndex, endDate]);
            }
          },
          {
            title: this.$t('orderInfoManager.orderState'),
            align: 'center',
            key: 'orderState',
            render: (h, params) => {
              let showName = "";
              let color = "primary";

              for (let i = 0; i < this.orderStateList.length; i++) {
                if (this.orderStateList[i].index == params.row.orderState) {
                  showName = this.orderStateList[i].showName;

                  if (this.orderStateList[i].index == 50) {
                    color = "success";
                  }
                  break;
                }
              }

              if (params.row.isOpt == 1) {
                showName = "已锁定";
                color = "error";
              }
              return h('Tag', {
                props: {
                  color: color
                },
              }, showName);
            }
          },
          {
            title: '下单时间',
            align: 'center',
            key: 'orderDate',
            width: 160,
            render: (h, params) => {
              return h('div',
                formatDate(new Date(params.row.addDate), 'yyyy-MM-dd hh:mm:ss')
              )
            }
          },
          {
            title: this.$t('button.operation'),
            key: 'action',
            fixed: 'right',
            align: 'center',
            width: 130,
            render: (h, params) => {
              let orderDetail, userBiRecord;
              orderDetail = h('div', {
                style: {
                  margin: '5px 0px'
                },
                on: {
                  click: () => {
                    that.orderId = params.row.id;
                    that.orderDetailModal = !that.orderDetailModal;
                  }
                }
              }, [h('a', this.$t('orderInfoManager.orderDetail'))]);
              userBiRecord = h('div', {
                style: {
                  margin: '5px 0px'
                },
                on: {
                  click: () => {
                    that.orderId = params.row.id;
                    that.userBiRecordModal = !that.userBiRecordModal;
                  }
                }
              }, [h('a', "订单奖励")]);
              let orderCanDomethod = [];
              orderCanDomethod.push(orderDetail);
              if (params.row.orderState == 50) {
                orderCanDomethod.push(userBiRecord);
              }
              return h('div', orderCanDomethod);
            }
          }
        ]
      }
    },
    methods: {
      getData(page) {
        if (page) {
          this.searchFrom.page = page;
        }
        list(this.searchFrom).then(response => {
          const data = response.data;
          this.dataCount = data.data.dataCount;
          this.tableData = data.data.entityList;
          this.orderStateList = data.data.orderStateList;
          this.orderTypeList = data.data.orderTypeList;
        }).catch(error => {});
      },
      updateOrder(id, orderState) {
        let entity = {
          id: id,
          orderState: orderState,
          updateUserId: this.$store.state.user.userId
        };
        updateOrder(entity).then(response => {
          const data = response.data;
          this.getData();
          this.$Message.success(this.$t('messageTip.doSuccess'));
        }).catch(error => {});
      },
      changePage(page) {
        this.searchFrom.page = page;
        this.getData();
      }
    }
  };
</script>
